<template>
  <div>
    <el-time-select
      placeholder="起始时间"
      v-model="startTime"
      @change="choosetime"
      :picker-options="{
      start: '00:00',
      step: '01:00',
      end: '24:00',
    }"
    ></el-time-select>
    <el-time-select
      placeholder="结束时间"
      v-model="endTime"
      @change="choosetime"
      :picker-options="{
      start: '00:00',
      step: '01:00',
      end: '24:00',
      minTime: startTime
    }"
    ></el-time-select>
    <i class="el-icon-minus" @click="reduceDateTimeCount"></i>
  </div>
</template>

<script>
export default {
  name: "TimeSelect",
  props: ["start", "end", "idx"],
  data() {
    return {
      startTime: "",
      endTime: ""
    };
  },
  watch: {
    start: {
      handler: function(val, oldval) {
        this.startTime = this.start;
      },
      deep: true,
      immediately: true
    },
    end: {
      handler: function(val, oldval) {
        this.endTime = this.end;
      },
      deep: true,
      immediately: true
    }
  },
  mounted() {
    this.startTime = this.start;
    this.endTime = this.end;
  },
  methods: {
    choosetime() {
      this.$emit(
        "gettime",
        this.startTime ? this.startTime : "",
        this.endTime ? this.endTime : "",
        this.idx
      );
    },
    reduceDateTimeCount() {
      this.$emit(
        "reduceCount",
        this.startTime ? this.startTime : "",
        this.endTime ? this.endTime : "",
        this.idx
      );
    }
  }
};
</script>

